<template>
  <div id="sign_up">
    <!--  报名  -->
    <div class="sign_up_title">
      <Icon class="arrow-left" name="arrow-left" size="25" @click="goHome"/>
      <div>集训队报名表</div>

    </div>

    <div class="sign_up_body">
      <Field class="my_field"  v-model="studentReq.realName" label="姓名" placeholder="请输入姓名" required/>

      <Field class="my_field"  v-model="studentReq.classes" label="班级" placeholder="例如:20级软件1班" required/>

      <Field class="my_field"  name="radio" label="性别" required>
        <template #input>
          <RadioGroup v-model="studentReq.gender" direction="horizontal">
            <Radio :name="true">男</Radio>
            <Radio :name="false">女</Radio>
          </RadioGroup>
        </template>
      </Field>

      <!--出生日期-->
      <Cell class="my_field" title="出生日期" :value="date || ''" @click="show=true" required/>
      <Popup  v-model="show" style="width: 90%;max-width: 500px">
        <DatetimePicker  type="date"
                        title="请选择出生日期"
                        @confirm="confirm"
                        @cancel="show=false"
                        :min-date="new Date(1990,0,1)"
                        :max-date="new Date(2010,0,1)"/>
      </Popup>


      <Field class="my_field"  v-model="studentReq.qq" type="tel" label="QQ" placeholder="请输入QQ" required/>

      <Field class="my_field"  v-model="studentReq.phone" type="tel" label="电话" placeholder="请输入手机号码" required/>

      <Field class="my_field"  name="radio" required label="原学校类别">
        <template #input>
          <RadioGroup v-model="studentReq.education">
            <Radio name="0" style="margin: 5px 0">中职</Radio>
            <Radio name="1" style="margin: 5px 0">普高</Radio>
            <Radio name="2" style="margin: 5px 0">其他</Radio>
          </RadioGroup>
        </template>
      </Field>

      <Field class="my_field"  v-model="studentReq.oldSchool" label="高中就读学校" placeholder="请输入学校名称" />

      <Field class="my_field"  v-model="studentReq.hometown"
             is-link
             readonly
             label="家乡"
             placeholder="请选择所在地区"
             @click="show2 = true" required/>
      <Popup v-model="show2" round position="bottom">
        <Cascader v-model="cascaderValue"
        title="请选择所在地区" :options="options"
                  @close="show2 = false"
                  :field-names="fieldNames"
                  @change="onChange"
                  @finish="onFinish"
                  />
      </Popup>



      <Field class="my_field"  name="radio" label="计算机语言熟悉程度" required>
        <template #input>
          <RadioGroup v-model="studentReq.programming">
            <Radio name="0" style="margin: 5px 0">未接触过</Radio>
            <Radio name="1" style="margin: 5px 0">接触过</Radio>
            <Radio name="2" style="margin: 5px 0">精通最少一门语言</Radio>
          </RadioGroup>
        </template>
      </Field>


      <Field class="my_field"  v-model="studentReq.plan" label="未来三年规划" placeholder="请输入自己的规划" autosize  type="textarea"/>

      <Field class="my_field"  v-model="studentReq.remarks" label="留言给我们" placeholder="请输入留言" autosize  type="textarea"/>

      <Button block type="info"
      style="margin: 10px auto;width: 90%" @click="submit">提交</Button>
    </div>

  </div>
</template>

<script>
import provinces from "@/db/provinces";

import {
  Field,
  // CellGroup,
  RadioGroup,
  Radio,
  // Calendar,
  Cell,
  Button,
  DatetimePicker,
  Popup,
  Cascader,
  Toast,
  Icon,
} from 'vant';

import {signup} from "@/network";
const cn=require("china-region");

export default {
  name: "Signup",
  components:{
    Field,
    // CellGroup,
    RadioGroup,
    Radio,
    // Calendar,
    Cell,
    Button,
    DatetimePicker,
    Popup,
    Cascader,
    Icon,
  },
  data(){
    return{
      studentReq:{},
      currentDate:"",
      show:false,
      show2:false,
      date:"",
      cascaderValue:"",//家乡
      fieldNames: {
        text: 'name',
        value: 'code',
        children: 'items',
      },
      options: provinces,
    }
  },
  methods:{
    goHome(){
      this.$router.push("/");
    },
    onFinish({selectedOptions}){//当用户全部选择完毕之后
      this.show2=false;
      console.log(selectedOptions);
      this.studentReq.hometown = selectedOptions.map((option) =>
          option.name).join('');
    },
    onChange({value}){//动态加载
      this.options.map((item,index)=>{
        if (item.code===value){
          this.options[index].items.map((item2)=>{
            item2.items=cn.getCounties(item2.code);
            //给每个市找到对应的区
          })
        }
      });
    },
    formatDate(date) {
      this.studentReq.birthday=date;
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date){
      console.log(date)
      this.show = false;
      this.date = this.formatDate(date);
    },
    submit(){//提交事件
      this.studentReq.birthday=this.currentDate.getTime();
      signup(this.studentReq).then((value)=>{
        switch (value.data.code) {
          case 20000:
            console.log("成功");
            Toast.success("提交成功");
            this.$router.push("/");
            break;
          case 50001:
            Toast.fail("缺少必填项");
            break;
          case 50002:
            Toast.fail("缺少必填项");
            break;

        }
      }).catch((error)=>{
        console.log(error);
      });
    },
    confirm(value){//确定生日按钮
      this.date=this.formatDate(value);
      this.currentDate=value;
      this.show=false;
    }
  }
}
</script>

<style scoped>

#sign_up{
  position: relative;
  width: 100%;
  height: auto;
}
.sign_up_title{
  position: relative;
  display: flex;
  font-size: 25px;
  text-align: center;
  /*background: #c0a16b;*/
  font-weight: bold;
  height: 50px;
  line-height: 50px;
  border-bottom: 2px solid #cccccc;
}
.sign_up_title div{
  position: absolute;
  width: 100%;
  flex: 1;
  z-index: 1;
  top: 5%;
}
.arrow-left{
  position: absolute;
  z-index: 2;
  line-height: 50px;
}
.sign_up_body{
  width: 90%;
  max-width: 900px;
  margin: 10px auto 0;
  height: auto;
}
.my_field{/*每个文本框*/
  background: rgba(0,0,0,0);
}

.popup{
  width: 90%;
}
</style>